import React from 'react';
import styles from './index.less';
import { Card, List, Tag, Radio } from 'antd';

const options = [
  { label: '已达标', value: 1 },
  { label: '未达标', value: 0 },
];

class Standard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      radioValue: 1
    }
  }

  getStatusTag = (stauts) => {
    let tag = null;
    switch (stauts) {
      case 0:
        tag = <Tag color="red">未达标</Tag>;
        break;
      case 1:
        tag = <Tag color="green">已达标</Tag>;
        break;
      default:
        break;
    }
    return tag;
  }

  onChange = (e) => {
    this.setState({
      radioValue: e.target.value,
    });
  }

  render() {
    const { achieve, unachieve } = this.props;
    const {radioValue} = this.state;
    const list = radioValue === 0 ? achieve : unachieve;
    return (
      <Card
        style={{ marginBottom: 16 }}
        title="达标情况"
        bordered={false}
        extra={
          <Radio.Group
            defaultValue={radioValue}
            options={options}
            onChange={this.onChange}
            value={radioValue}
            optionType="button"/>
        }
        bodyStyle={{height: 225, padding: 0 }}>
        <List
          className={styles.rightStandard}
          itemLayout="horizontal"
          dataSource={list}
          renderItem={(item) => (
            <List.Item className={styles.item}>
              {this.getStatusTag(radioValue)}
              <span>{item.name}</span>
            </List.Item>
          )}
        />
      </Card>
    );
  }
}

export default Standard;
